<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/17 15:27:14
  @file: tabNav.vue
  @description:
  ==================
  tabMenu 首页中间部分的切换导航
  根据传入的每组数据格式不同进行分栏均匀排布
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="tab-menu">
    <!-- 首页导航三栏目 -->
    <div class="tab-menu-item" :style="`width:calc(100% / ${links.length})`" v-for="(item,index) in links" :key="index">
      <router-link :to="item.link">
        <i class="iconfont" :class="item.iconfont"></i>
        <div class="content">
          <p><strong>{{item.name}}</strong></p>
          <p>{{item.text}}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GFTabMenu',
  props: {
    links: {
      type: Array,
      require: true
    }
  }
};
</script>

<style lang='scss' scoped>
.tab-menu {
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
  .tab-menu-item {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #e7e7e7;
    padding: 2%;
    .iconfont {
      display: inline-block;
      font-size: 50px;
      width: 20%;
    }
    .content {
      width: 80%;
      display: inline-block;
      font-size: 16px;
    }
    &:hover i {
      color: var(--themeAColor);
    }
  }
}
</style>
